<template>
  <div>
    <div class="steps-box">
      <el-steps :active="active" finish-status="success">
        <el-step title="选择身份"></el-step>
        <el-step title="填写基本资料"></el-step>
        <el-step title="认证"></el-step>
      </el-steps>

      <div v-if="active === 0" class="select-identity">
        <div class="title">请选择身份:</div>
        <div class="type">
          <div
            class="item"
            :class="identityType === '个人' ? 'active' : ''"
            @click="identityType = '个人'"
          >
            <div class="icon-person">
              <svg
                t="1699721004626"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4866"
                width="50"
                height="50"
              >
                <path
                  d="M626.568192 981.999616l-23.379968 0-36.857856 0.283648L68.137984 982.283264l0-23.989248c0 0-10.815488-134.006784 186.535936-168.308736 0 0 150.230016-20.28032 160.748544-61.595648 0 0 5.732352-4.596736 1.502208-52.578304-9.017344-102.161408-75.86816-150.234112-102.909952-189.293568-27.041792-39.063552-29.293568-84.13184-29.293568-84.13184 0-11.264 4.716544-15.391744 12.560384-22.626304 9.696256-8.950784 6.786048-18.4576 4.934656-28.52864-7.04512-38.23616-7.666688-99.662848-0.970752-138.138624 1.502208-45.820928 43.56608-82.625536 43.56608-82.625536 7.892992-6.695936 15.803392-14.062592 21.343232-22.898688 1.547264-2.460672 2.970624-5.09952 3.8144-7.897088 3.16928-10.548224-7.560192-18.292736-5.407744-29.51168 1.942528-10.116096 19.280896-10.61376 29.766656-11.164672 23.614464-1.243136 47.347712-2.172928 70.925312-0.366592C641.71008 72.155136 699.725824 137.1136 699.725824 137.1136c13.73696 16.449536 22.787072 36.566016 28.23168 57.184256 1.630208 6.16448 3.028992 12.45696 3.785728 18.79552 5.501952 31.602688 5.481472 64.559104 3.770368 96.494592-0.815104 15.22688-2.584576 30.215168-4.819968 45.282304-1.17248 7.8848-0.571392 15.222784 4.70016 21.523456 4.4032 5.271552 9.44128 8.95488 11.60192 15.881216 1.011712 3.238912 1.275904 6.736896 1.275904 10.112 0 0-2.255872 45.068288-29.297664 84.13184-27.041792 39.059456-93.893632 87.13216-102.905856 189.293568-4.23424 47.981568 1.502208 52.578304 1.502208 52.578304 10.514432 41.314304 160.748544 61.595648 160.748544 61.595648 199.55712 37.010432 186.53184 168.308736 186.53184 168.308736l0 23.989248-131.3792 0 20.70016-0.283648L836.49536 982.00064l-36.64384 0L626.568192 982.00064 626.568192 981.999616z"
                  fill="#1876ff"
                  p-id="4867"
                ></path>
              </svg>
            </div>
            <div>个人信息认证</div>
            <div>适用于个人开发者，需要提供证明个人身份的相关资料</div>
            <div v-if="false" class="icon-pass">
              <svg
                t="1699718515082"
                class="icon"
                viewBox="0 0 1318 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1892"
                id="mx_n_1699718515082"
                width="50"
                height="50"
              >
                <path
                  d="M783.025177 903.036783v-27.406802l-24.631429 14.223783-26.712959-6.244587 5.550744 26.366037-15.611469 23.243744 27.753724 2.081529 17.346077 20.815293 11.448411-25.325273 26.366037-10.407647z m-483.955556-291.414098l-24.284508 11.795332-26.019116-7.285352 4.856902 27.406802-15.61147 22.202979 27.059881 4.856902 16.652234 22.896822 12.142254-24.284509 25.672195-8.326117-19.774529-19.774528z m76.669662 214.397515v27.059881l25.325273-11.448411 26.712959 9.366881-4.856902-26.712959 16.999156-21.162214-27.753724-5.550745-15.958391-22.202979-13.183019 23.590665-27.05988 7.285353z m173.460773 94.36266l10.060725 25.325273 18.733763-20.468371 28.100645-2.081529-14.223783-23.243744 7.285352-26.019116-27.406802 6.244588-23.937586-14.223783-2.775373 26.712959-21.856057 17.346077z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1893"
                ></path>
                <path
                  d="M534.629351 980.400288A485.690164 485.690164 0 0 1 173.484022 512.056201l-26.366038-15.611469a512.403123 512.403123 0 0 0 781.614243 450.998009l-26.712959-15.264548a485.690164 485.690164 0 0 1-367.389917 48.222095z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1894"
                ></path>
                <path
                  d="M706.355516 818.734848a306.331725 306.331725 0 0 1-126.279443-7.632274 309.80094 309.80094 0 0 1-208.152927-185.603027l-34.692155-20.468371a337.554664 337.554664 0 0 0 236.947416 232.437435 333.391605 333.391605 0 0 0 168.25695 0l-34.692155-20.12145zM559.260781 127.320207v27.059881l24.631429-14.223784 27.059881 6.244588-5.550745-26.366037 15.61147-23.243744-27.753724-2.081529-17.692999-20.815293-11.448411 25.325273-26.712959 10.407646zM1318.325122 688.98619v-27.406803a52.732075 52.732075 0 0 0-24.978351-32.957546L242.868331 22.202979a53.77284 53.77284 0 0 0-73.547368 19.427606L7.308602 321.943194a53.77284 53.77284 0 0 0 19.427606 73.547368l1050.825362 606.418862a54.119761 54.119761 0 0 0 73.547367-19.774528l161.665441-279.965688a36.773684 36.773684 0 0 0 5.550744-13.183018z m-183.521497 268.170354a41.283664 41.283664 0 0 1-55.507448 14.917627L52.061481 378.838328a40.242899 40.242899 0 0 1-14.917627-55.160526l148.482422-256.721944a40.936742 40.936742 0 0 1 55.160526-14.917626l1027.234696 593.235843a39.895978 39.895978 0 0 1 15.61147 54.813604l-148.1355 257.068865z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1895"
                ></path>
                <path
                  d="M785.80055 43.712115A485.690164 485.690164 0 0 1 1144.86435 512.056201l26.712959 15.61147a512.403123 512.403123 0 0 0-781.614243-450.998009l26.366038 15.611469a482.56787 482.56787 0 0 1 369.471446-48.569016z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1896"
                ></path>
                <path
                  d="M740.353827 213.009829a309.107097 309.107097 0 0 1 208.152928 185.603027l34.692154 20.468371a336.513899 336.513899 0 0 0-405.204365-233.825122l34.692155 20.12145a306.678646 306.678646 0 0 1 126.279442 7.632274z m64.874329-100.95417l-10.407646-24.978351-18.733763 20.468371-28.447567 1.734608 14.223783 23.243743-6.938431 26.366038 27.406802-6.244588 23.937587 14.223783 3.122294-27.05988 21.856057-17.346077z m173.460773 108.239522v-27.406802l-25.325273 11.448411-26.712959-9.366881 3.816137 27.05988-16.999155 21.162214 28.100645 5.203824 16.305312 22.896822 13.183019-23.937587 27.059881-7.285352z m44.405958 192.88838l23.590665-13.876862 27.059881 7.632274-6.938431-27.406802 13.876862-22.896822-27.406803-3.469216-18.733763-21.509135-10.060725 25.325272-25.325273 9.713804 21.509136 18.733763z m-589.766627 75.975818a21.509136 21.509136 0 0 1-15.264548-2.775372l-132.177109-74.935054a15.264548 15.264548 0 0 1-6.244588-23.243743l41.283664-71.81276 161.318518 93.321895 63.139722-109.280287L346.944795 186.643792l-13.529941 23.590665 173.460773 99.219562-34.692154 61.752035-135.993246-78.40427 20.468371-34.692154-24.978351-14.570705-78.057348 135.646324a34.692155 34.692155 0 0 0 13.183019 53.425918l143.62552 82.91425a45.446722 45.446722 0 0 0 30.529096 5.203823 156.461617 156.461617 0 0 0 44.752879-52.038232l-19.774528-21.856057c-14.917626 26.712959-28.100645 40.589821-34.692155 42.324428z m186.990713-81.179641l27.406802-6.938431a383.348308 383.348308 0 0 0-20.815293-66.955859l-26.366038 6.59151a318.127057 318.127057 0 0 1 19.774529 67.30278z m30.876017 220.989024l-52.385153-30.876017a107.545679 107.545679 0 0 1-30.876018-26.712959 75.975818 75.975818 0 0 1-9.713803-26.366038 27.753724 27.753724 0 0 0 0-6.244588l55.507447-96.097268-58.629741-34.692154-13.183019 22.896822 34.692155 20.468371-42.67135 73.547367a119.687933 119.687933 0 0 0-57.935898 19.080685l8.326117 27.406803c26.712959-15.61147 43.018272-21.856057 48.569016-18.733764a15.61147 15.61147 0 0 1 6.244588 12.142254 64.180486 64.180486 0 0 0 16.652234 34.692155 225.845926 225.845926 0 0 0 39.202135 28.447567c16.305313 10.060725 31.916782 19.080685 46.140565 27.406802l59.323585 34.692154 20.121449-21.162214c-7.285352-3.469215-17.692999-8.673039-30.876017-15.958391z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1897"
                ></path>
                <path
                  d="M693.86634 426.019658q11.101489 18.386842 18.733764 34.692155l-59.670506-34.692155-81.179642 140.850147 23.243744 13.183019 24.978351-43.018271 36.773684 21.162214-24.63143 42.67135 22.549901 13.183019 24.631429-42.67135 37.467527 21.509135-7.632274 13.183019a9.01996 9.01996 0 0 1-13.876862 3.469216l-18.03992-11.795333-6.591509 23.590665 20.121449 11.448411a24.978351 24.978351 0 0 0 37.814449-8.673038l69.384309-115.524875-53.77284-31.222939v-2.08153a321.249351 321.249351 0 0 0 69.384309-5.550744l10.060725-17.346078-142.931676-82.567327-12.142255 20.815292 50.303625 28.794489-22.549901 5.550744z m-25.672194 111.708738l-36.426762-21.162215 10.407646-18.03992 36.773684 21.162214z m22.5499-38.508292l-36.773683-21.856057 10.407646-18.039921 36.773684 21.162215zM728.558495 572.42055l-37.467527-21.509136 10.407646-18.386842 37.467527 21.856058z m32.610625-56.548212l-10.407646 18.039921-37.467527-21.856058 10.407646-18.386842z m14.917627-61.058192a266.782669 266.782669 0 0 1-40.936743 0c-4.856902-11.101489-10.754568-22.5499-16.999156-34.692154z m141.54399 327.493939c-21.162214-12.142254-39.202135-22.896822-54.466683-32.263703a110.321051 110.321051 0 0 1-32.610625-27.059881 81.179642 81.179642 0 0 1-10.754568-26.712959 26.366037 26.366037 0 0 0-2.081529-6.244588l56.895133-98.525719-58.976662-34.692154-13.529941 23.590665 34.692155 20.468371-42.324429 73.200446a132.52403 132.52403 0 0 0-58.976662 20.12145l8.326117 27.406802c27.406802-16.305313 44.059036-22.5499 49.609781-19.427607a17.692999 17.692999 0 0 1 6.591509 12.489176 69.384309 69.384309 0 0 0 18.039921 34.692154 252.905807 252.905807 0 0 0 40.58982 29.488332l48.222095 28.447567 55.160526 31.916782 20.468371-21.509136c-6.938431-3.122294-16.652234-8.326117-29.488331-14.917627l-34.692155-20.815292z m-38.855213-224.45824l28.447567-7.632274a402.428993 402.428993 0 0 0-21.162214-66.262015l-26.019116 6.591509a329.228547 329.228547 0 0 1 18.733763 67.30278z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1898"
                ></path>
                <path
                  d="M898.550052 616.132665a462.44642 462.44642 0 0 1 6.59151 72.506603l27.753723-2.428451a450.998009 450.998009 0 0 0-8.326117-69.384309h-26.019116z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1899"
                ></path>
                <path
                  d="M941.221402 736.514441a11.101489 11.101489 0 0 1-16.652234 4.50998c-10.754568-6.244588-21.856057-13.183019-32.957547-21.162214l-7.979195 27.059881 36.773684 21.162214a27.406802 27.406802 0 0 0 41.977507-11.10149l63.139721-109.280286 36.773684 21.162214 14.223783-24.284508-35.732919-21.162215 23.243743-40.242899-24.978351-14.223783-22.896822 40.242899-97.831876-56.548212-14.223783 24.284508 98.178797 56.201291-59.670506 104.076463z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1900"
                ></path>
              </svg>
            </div>
          </div>

          <div
            class="item"
            :class="identityType === '企业' ? 'active' : ''"
            @click="identityType = '企业'"
          >
            <div>
              <svg
                t="1699721401038"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5949"
                width="50"
                height="50"
              >
                <path
                  d="M912 912H112v-55h68V132a20 20 0 0 1 20-20h389a20 20 0 0 1 20 20v290h215a20 20 0 0 1 20 20v415h68v55zM507 213a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m0 188a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m0 188a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m0 179a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m285-264a20 20 0 0 0-20-20H633a20 20 0 0 0-20 20v16a20 20 0 0 0 20 20h139a20 20 0 0 0 20-20v-16z m0 130a20 20 0 0 0-20-20H633a20 20 0 0 0-20 20v16a20 20 0 0 0 20 20h139a20 20 0 0 0 20-20v-16z m0 147a20 20 0 0 0-20-20H633a20 20 0 0 0-20 20v16a20 20 0 0 0 20 20h139a20 20 0 0 0 20-20v-16z"
                  fill="#bbbbbb"
                  p-id="5950"
                ></path>
              </svg>
            </div>
            <div>企业信息认证</div>
            <div>
              适用于企业、机构开发者，需要提供企业、机构注册信息的相关资料
            </div>
            <div v-if="false" class="icon-pass">
              <svg
                t="1699718515082"
                class="icon"
                viewBox="0 0 1318 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1892"
                id="mx_n_1699718515082"
                width="50"
                height="50"
              >
                <path
                  d="M783.025177 903.036783v-27.406802l-24.631429 14.223783-26.712959-6.244587 5.550744 26.366037-15.611469 23.243744 27.753724 2.081529 17.346077 20.815293 11.448411-25.325273 26.366037-10.407647z m-483.955556-291.414098l-24.284508 11.795332-26.019116-7.285352 4.856902 27.406802-15.61147 22.202979 27.059881 4.856902 16.652234 22.896822 12.142254-24.284509 25.672195-8.326117-19.774529-19.774528z m76.669662 214.397515v27.059881l25.325273-11.448411 26.712959 9.366881-4.856902-26.712959 16.999156-21.162214-27.753724-5.550745-15.958391-22.202979-13.183019 23.590665-27.05988 7.285353z m173.460773 94.36266l10.060725 25.325273 18.733763-20.468371 28.100645-2.081529-14.223783-23.243744 7.285352-26.019116-27.406802 6.244588-23.937586-14.223783-2.775373 26.712959-21.856057 17.346077z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1893"
                ></path>
                <path
                  d="M534.629351 980.400288A485.690164 485.690164 0 0 1 173.484022 512.056201l-26.366038-15.611469a512.403123 512.403123 0 0 0 781.614243 450.998009l-26.712959-15.264548a485.690164 485.690164 0 0 1-367.389917 48.222095z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1894"
                ></path>
                <path
                  d="M706.355516 818.734848a306.331725 306.331725 0 0 1-126.279443-7.632274 309.80094 309.80094 0 0 1-208.152927-185.603027l-34.692155-20.468371a337.554664 337.554664 0 0 0 236.947416 232.437435 333.391605 333.391605 0 0 0 168.25695 0l-34.692155-20.12145zM559.260781 127.320207v27.059881l24.631429-14.223784 27.059881 6.244588-5.550745-26.366037 15.61147-23.243744-27.753724-2.081529-17.692999-20.815293-11.448411 25.325273-26.712959 10.407646zM1318.325122 688.98619v-27.406803a52.732075 52.732075 0 0 0-24.978351-32.957546L242.868331 22.202979a53.77284 53.77284 0 0 0-73.547368 19.427606L7.308602 321.943194a53.77284 53.77284 0 0 0 19.427606 73.547368l1050.825362 606.418862a54.119761 54.119761 0 0 0 73.547367-19.774528l161.665441-279.965688a36.773684 36.773684 0 0 0 5.550744-13.183018z m-183.521497 268.170354a41.283664 41.283664 0 0 1-55.507448 14.917627L52.061481 378.838328a40.242899 40.242899 0 0 1-14.917627-55.160526l148.482422-256.721944a40.936742 40.936742 0 0 1 55.160526-14.917626l1027.234696 593.235843a39.895978 39.895978 0 0 1 15.61147 54.813604l-148.1355 257.068865z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1895"
                ></path>
                <path
                  d="M785.80055 43.712115A485.690164 485.690164 0 0 1 1144.86435 512.056201l26.712959 15.61147a512.403123 512.403123 0 0 0-781.614243-450.998009l26.366038 15.611469a482.56787 482.56787 0 0 1 369.471446-48.569016z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1896"
                ></path>
                <path
                  d="M740.353827 213.009829a309.107097 309.107097 0 0 1 208.152928 185.603027l34.692154 20.468371a336.513899 336.513899 0 0 0-405.204365-233.825122l34.692155 20.12145a306.678646 306.678646 0 0 1 126.279442 7.632274z m64.874329-100.95417l-10.407646-24.978351-18.733763 20.468371-28.447567 1.734608 14.223783 23.243743-6.938431 26.366038 27.406802-6.244588 23.937587 14.223783 3.122294-27.05988 21.856057-17.346077z m173.460773 108.239522v-27.406802l-25.325273 11.448411-26.712959-9.366881 3.816137 27.05988-16.999155 21.162214 28.100645 5.203824 16.305312 22.896822 13.183019-23.937587 27.059881-7.285352z m44.405958 192.88838l23.590665-13.876862 27.059881 7.632274-6.938431-27.406802 13.876862-22.896822-27.406803-3.469216-18.733763-21.509135-10.060725 25.325272-25.325273 9.713804 21.509136 18.733763z m-589.766627 75.975818a21.509136 21.509136 0 0 1-15.264548-2.775372l-132.177109-74.935054a15.264548 15.264548 0 0 1-6.244588-23.243743l41.283664-71.81276 161.318518 93.321895 63.139722-109.280287L346.944795 186.643792l-13.529941 23.590665 173.460773 99.219562-34.692154 61.752035-135.993246-78.40427 20.468371-34.692154-24.978351-14.570705-78.057348 135.646324a34.692155 34.692155 0 0 0 13.183019 53.425918l143.62552 82.91425a45.446722 45.446722 0 0 0 30.529096 5.203823 156.461617 156.461617 0 0 0 44.752879-52.038232l-19.774528-21.856057c-14.917626 26.712959-28.100645 40.589821-34.692155 42.324428z m186.990713-81.179641l27.406802-6.938431a383.348308 383.348308 0 0 0-20.815293-66.955859l-26.366038 6.59151a318.127057 318.127057 0 0 1 19.774529 67.30278z m30.876017 220.989024l-52.385153-30.876017a107.545679 107.545679 0 0 1-30.876018-26.712959 75.975818 75.975818 0 0 1-9.713803-26.366038 27.753724 27.753724 0 0 0 0-6.244588l55.507447-96.097268-58.629741-34.692154-13.183019 22.896822 34.692155 20.468371-42.67135 73.547367a119.687933 119.687933 0 0 0-57.935898 19.080685l8.326117 27.406803c26.712959-15.61147 43.018272-21.856057 48.569016-18.733764a15.61147 15.61147 0 0 1 6.244588 12.142254 64.180486 64.180486 0 0 0 16.652234 34.692155 225.845926 225.845926 0 0 0 39.202135 28.447567c16.305313 10.060725 31.916782 19.080685 46.140565 27.406802l59.323585 34.692154 20.121449-21.162214c-7.285352-3.469215-17.692999-8.673039-30.876017-15.958391z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1897"
                ></path>
                <path
                  d="M693.86634 426.019658q11.101489 18.386842 18.733764 34.692155l-59.670506-34.692155-81.179642 140.850147 23.243744 13.183019 24.978351-43.018271 36.773684 21.162214-24.63143 42.67135 22.549901 13.183019 24.631429-42.67135 37.467527 21.509135-7.632274 13.183019a9.01996 9.01996 0 0 1-13.876862 3.469216l-18.03992-11.795333-6.591509 23.590665 20.121449 11.448411a24.978351 24.978351 0 0 0 37.814449-8.673038l69.384309-115.524875-53.77284-31.222939v-2.08153a321.249351 321.249351 0 0 0 69.384309-5.550744l10.060725-17.346078-142.931676-82.567327-12.142255 20.815292 50.303625 28.794489-22.549901 5.550744z m-25.672194 111.708738l-36.426762-21.162215 10.407646-18.03992 36.773684 21.162214z m22.5499-38.508292l-36.773683-21.856057 10.407646-18.039921 36.773684 21.162215zM728.558495 572.42055l-37.467527-21.509136 10.407646-18.386842 37.467527 21.856058z m32.610625-56.548212l-10.407646 18.039921-37.467527-21.856058 10.407646-18.386842z m14.917627-61.058192a266.782669 266.782669 0 0 1-40.936743 0c-4.856902-11.101489-10.754568-22.5499-16.999156-34.692154z m141.54399 327.493939c-21.162214-12.142254-39.202135-22.896822-54.466683-32.263703a110.321051 110.321051 0 0 1-32.610625-27.059881 81.179642 81.179642 0 0 1-10.754568-26.712959 26.366037 26.366037 0 0 0-2.081529-6.244588l56.895133-98.525719-58.976662-34.692154-13.529941 23.590665 34.692155 20.468371-42.324429 73.200446a132.52403 132.52403 0 0 0-58.976662 20.12145l8.326117 27.406802c27.406802-16.305313 44.059036-22.5499 49.609781-19.427607a17.692999 17.692999 0 0 1 6.591509 12.489176 69.384309 69.384309 0 0 0 18.039921 34.692154 252.905807 252.905807 0 0 0 40.58982 29.488332l48.222095 28.447567 55.160526 31.916782 20.468371-21.509136c-6.938431-3.122294-16.652234-8.326117-29.488331-14.917627l-34.692155-20.815292z m-38.855213-224.45824l28.447567-7.632274a402.428993 402.428993 0 0 0-21.162214-66.262015l-26.019116 6.591509a329.228547 329.228547 0 0 1 18.733763 67.30278z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1898"
                ></path>
                <path
                  d="M898.550052 616.132665a462.44642 462.44642 0 0 1 6.59151 72.506603l27.753723-2.428451a450.998009 450.998009 0 0 0-8.326117-69.384309h-26.019116z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1899"
                ></path>
                <path
                  d="M941.221402 736.514441a11.101489 11.101489 0 0 1-16.652234 4.50998c-10.754568-6.244588-21.856057-13.183019-32.957547-21.162214l-7.979195 27.059881 36.773684 21.162214a27.406802 27.406802 0 0 0 41.977507-11.10149l63.139721-109.280286 36.773684 21.162214 14.223783-24.284508-35.732919-21.162215 23.243743-40.242899-24.978351-14.223783-22.896822 40.242899-97.831876-56.548212-14.223783 24.284508 98.178797 56.201291-59.670506 104.076463z"
                  fill="#1876ff"
                  opacity=".8"
                  p-id="1900"
                ></path>
              </svg>
            </div>
          </div>
        </div>

        <div style="display: flex; justify-content: center">
          <el-button style="margin-top: 12px" @click="next">下一步</el-button>
        </div>
      </div>

      <div v-if="active === 1">
        <el-form
          v-if="identityType === '个人'"
          ref="personForm"
          :model="personForm"
          :rules="personRules"
          label-width="120px"
        >
          <el-form-item label="真实姓名">
            <el-input v-model="personForm.in_nick"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="in_card">
            <el-input v-model="personForm.in_card"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="personForm.in_mobile"></el-input>
            <el-button
              type="primary"
              style="margin-top: 10px"
              @click="getCode"
              :disabled="iscode1"
              >{{
                iscode1 ? `${timeval1}秒后重新获取` : `获取验证码`
              }}</el-button
            >
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="personForm.code"></el-input>
          </el-form-item>

          <el-form-item label="身份证照片">
            <!-- 正面 -->
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'zm')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgzm" :src="in_imgzm" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="uploadTip">身份证正面照片</div>
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/img2/zhengmian2.png" class="avatar" alt="" />
            </div>

            <!-- 反面 -->
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'fm')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgfm" :src="in_imgfm" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="uploadTip">身份证反面照片</div>
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/img2/fanmian2.png" class="avatar" alt="" />
            </div>

            <!-- 手持 -->
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'sc')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgsc" :src="in_imgsc" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <div slot="tip" class="uploadTip">身份证手持照片</div> -->
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/img2/shouchi3.png" class="avatar" alt="" />
            </div>
          </el-form-item>
        </el-form>

        <el-form
          v-else
          ref="companyForm"
          :model="companyForm"
          label-width="120px"
        >
          <el-form-item label="企业名称">
            <el-input v-model="companyForm.in_nameqy"></el-input>
          </el-form-item>
          <el-form-item label="社会信用代码">
            <el-input v-model="companyForm.in_cardqy"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="companyForm.in_mobile"></el-input>
            <el-button
              type="primary"
              style="margin-top: 10px"
              @click="getCode1"
              :disabled="iscode2"
              >{{
                iscode2 ? `${timeval2}秒后重新获取` : `获取验证码`
              }}</el-button
            >
          </el-form-item>

          <el-form-item label="验证码">
            <el-input v-model="companyForm.code"></el-input>
          </el-form-item>

          <el-form-item label="营业执照">
            <!-- 正面 -->
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'zz')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgqy" :src="in_imgqy" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="uploadTip">身份证正面照片</div>
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/营业执照示例.png" class="avatar" alt="" />
            </div>
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'qyzm')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgqyzm" :src="in_imgqyzm" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="uploadTip">身份证反面照片</div>
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/img2/zhengmian2.png" class="avatar" alt="" />
            </div>
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'qyfm')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgqyfm" :src="in_imgqyfm" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="uploadTip">身份证手持照片</div>
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/img2/fanmian2.png" class="avatar" alt="" />
            </div>
            <div class="IDCardItem">
              <el-upload
                class="avatar-uploader"
                action="#"
                :http-request="(params) => httpRequest(params, 'qysc')"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadMiniChange"
              >
                <img v-if="in_imgqysc" :src="in_imgqysc" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <div slot="tip" class="uploadTip">身份证正面照片</div> -->
              </el-upload>
              <div class="text-center">示例：</div>
              <img src="@/assets/img2/shouchi3.png" class="avatar" alt="" />
            </div>
          </el-form-item>
        </el-form>

        <div class="tip">
          <div class="title">提示</div>
          <div class="tipList">
            <div class="item" v-for="item in tipList" :key="item">
              {{ item }}
            </div>
          </div>
        </div>

        <div style="display: flex; justify-content: center">
          <el-button style="margin-top: 12px" @click="active = active - 1"
            >上一步</el-button
          >

          <el-button style="margin-top: 12px" @click="submitAuth"
            >提交认证资料</el-button
          >
        </div>
      </div>
    </div>
    <div
      v-if="active === 3 && this.userInfo.in_verify == 2"
      style="text-align: center"
    >
      <div style="margin-top: 30px; font-size: 30px; color: #2fa4e7">
        <i class="el-icon-circle-check"></i>认证中，预计一个工作日审批完成....
      </div>
    </div>
    <div
      v-if="active === 3 && this.userInfo.in_verify == 1"
      style="text-align: center"
    >
      <div style="margin-top: 30px; font-size: 30px; color: #67c23a">
        <i class="el-icon-circle-check"></i
        >{{ userInfo.in_type == 1 ? '个人' : '企业' }}认证成功
      </div>
    </div>
  </div>
</template>

<script>
import {
  uploadImageApi,
  personalAuthApi,
  companyAuthApi,
  sendMobileCodeApi
} from '@/api/person';
import { Message } from 'element-ui';
export default {
  data() {
    return {
      timeval1: 60,
      timeval2: 60,
      time1: null,
      time2: null,
      iscode1: false,
      iscode2: false,
      active: 0,
      // selectAuthType:'',
      identityType: '个人',
      personForm: {
        in_nick: '',
        in_card: '',
        in_imgzm: '',
        in_imgfm: '',
        in_imgsc: '',
        in_mobile: '',
        code: ''
      },
      in_imgzm: '',
      in_imgfm: '',
      in_imgsc: '',
      in_imgqy: '',
      in_imgqyzm: '',
      in_imgqyfm: '',
      in_imgqysc: '',
      companyForm: {
        // 执照号码
        in_cardqy: '',
        // 执照照片
        in_imgqy: '',
        // 名字
        in_nameqy: '',
        in_mobile: '',
        code: '',
        in_imgzm: '',
        in_imgfm: '',
        in_imgsc: ''
      },
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      tipList: [
        '1. 应相关部门要求，请严格按照图片示例上传！；',
        '2. 应相关部门要求,网络应用传播需要完成实名认证；',
        '3. 实名认证要上传正反面身份证和手持身份证照片；',
        '4. 单张照片大小不超过2M，支持PNG、JPG格式；',
        '5. 所上传的图片，保证文字和图片、人像清晰可见；'
      ],
      imageUrl: '',
      personRules: {
        in_card: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          {
            pattern:
              /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号码',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  props: ['userInfo'],
  created() {
    if (this.userInfo.in_verify == 1 || this.userInfo.in_verify == 2) {
      this.active = 3;
      this.userInfo.in_verify == 1;
    } else {
      this.active = 0;
    }
  },
  beforeDestroy() {
    if (this.time1) clearInterval(this.time1);
    if (this.time2) clearInterval(this.time2);
  },
  watch: {
    iscode1(val) {
      if (!val) {
        clearInterval(this.time1);
        this.timeval1 = 60;
      }
    },
    iscode2(val) {
      if (!val) {
        clearInterval(this.time2);
        this.timeval2 = 60;
      }
    }
  },
  methods: {
    getCode() {
      if (!this.personForm.in_mobile)
        return this.$message.warning('请输入手机号!');
      this.iscode1 = true;
      sendMobileCodeApi(this.personForm.in_mobile)
        .then((res) => {
          this.$message.success('发送成功!');
          this.time1 = setInterval(() => {
            --this.timeval1;
            if (this.timeval1 <= 0) this.iscode1 = false;
          }, 1000);
        })
        .catch((res) => {
          this.$message.error('请输入正确的手机号!');
          this.iscode1 = false;
        });
    },
    getCode1() {
      if (!this.companyForm.in_mobile)
        return this.$message.warning('请输入手机号!');
      this.iscode2 = true;
      sendMobileCodeApi(this.companyForm.in_mobile)
        .then((res) => {
          this.$message.success('发送成功!');
          this.time2 = setInterval(() => {
            --this.timeval2;
            if (this.timeval2 <= 0) this.iscode2 = false;
          }, 1000);
        })
        .catch((res) => {
          this.$message.error('请输入正确的手机号!');
          this.iscode2 = false;
        });
    },

    next() {
      if (this.active++ > 3) this.active = 3;
    },

    submitAuth() {
      // if(this.personForm.in_card) return Message.error('请填写')
      if (this.identityType === '个人') {
        personalAuthApi(this.personForm).then((res) => {
          if (res.status == -1) {
            this.$alert(
              '请核对信息是否符合规则或资料是否填写不完整！',
              '温馨提示',
              {
                confirmButtonText: '确定'
              }
            );
          } else {
            Message.success('提交成功,请等待审批结果');
            window.location.reload();
          }
        });
      } else {
        companyAuthApi(this.companyForm).then((res) => {
          if (res.status == -1) {
            this.$alert(
              '请核对信息是否符合规则或资料是否填写不完整！',
              '温馨提示',
              {
                confirmButtonText: '确定'
              }
            );
          } else {
            Message.success('提交成功,请等待审批结果');
            window.location.reload();
          }
        });
      }
      // Message.success
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      const res = isJPG || isPNG;
      if (!res) {
        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return res && isLt2M;
    },
    async httpRequest(params, type) {
      const file = params.file;
      const formData = new FormData();
      const reader = new FileReader();
      const that = this;
      reader.onload = function (readerEvent) {
        var base64 = readerEvent.target.result;
        if (type === 'zm') {
          that.in_imgzm = base64;
        } else if (type === 'fm') {
          that.in_imgfm = base64;
        } else if (type === 'sc') {
          that.in_imgsc = base64;
        } else if (type === 'zz') {
          that.in_imgqy = base64;
        } else if (type === 'qyzm') {
          that.in_imgqyzm = base64;
        } else if (type === 'qyfm') {
          that.in_imgqyfm = base64;
        } else if (type === 'qysc') {
          that.in_imgqysc = base64;
        }
      };
      reader.readAsDataURL(file);
      formData.append('file', file);
      uploadImageApi(formData)
        .then((res) => {
          const url = res.data;
          // 正
          if (type === 'zm') {
            that.personForm.in_imgzm = url;
          }
          // 反
          if (type === 'fm') {
            that.personForm.in_imgfm = url;
          }
          // 手
          if (type === 'sc') {
            that.personForm.in_imgsc = url;
          }
          // 执
          if (type === 'zz') {
            that.companyForm.in_imgqy = url;
          }
          if (type === 'qyzm') {
            that.companyForm.in_imgzm = url;
          }
          if (type === 'qyfm') {
            that.companyForm.in_imgfm = url;
          }
          if (type === 'qysc') {
            that.companyForm.in_imgsc = url;
          }
        })
        .catch(() => {
          that.in_imgzm = '';
          that.in_imgfm = '';
          that.in_imgsc = '';
          that.in_imgqy = '';
          that.in_imgqyzm = '';
          that.in_imgqyfm = '';
          that.in_imgqysc = '';
          Message.error('图片上传失败，请重新上传。');
        });
    },
    uploadMiniChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.steps-box {
  margin: 5% 10% 0;

  .select-identity {
    .title {
      margin: 25px 0;
    }

    .type {
      display: flex;
      justify-content: space-between;

      .item {
        border: 2px solid #eee;
        width: 39%;
        height: 300px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        padding: 5% 10%;
        position: relative;
        background-color: #f5f5f5;

        .icon-pass {
          position: absolute;
          top: 5%;
          right: 5%;
        }
      }

      .active {
        background-color: #f0fafb;
        border-color: #1891f7;
      }
    }
  }
}

.IDCardItem {
  display: flex;

  .text-center {
    align-self: center;
    margin: 0 20px;
  }

  .uploadImage {
    border: none;
    cursor: default;
  }
}

.tip {
  display: flex;

  .title {
    color: red;
    font-weight: 600;
    margin-right: 20px;
  }

  .tipList {
    display: flex;
    flex-direction: column;

    .item {
      // line-height: 2;
      margin-bottom: 10px;
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
